<template>
  <div id="HomeView">
    <!-- Summary 展示概况 -->
    <el-row class="grid-content bg-purple Summary">
      <Summary :summaryDate="summaryDate" />
    </el-row>

    <el-row :gutter="20">
      <!-- FinancialData 财务数据 -->
      <el-col :span="12">
        <div class="grid-content bg-purple FinancialData">
          <FinancialData />
        </div>
      </el-col>
      <!-- StudentMsg 学员信息 -->
      <el-col :span="12">
        <div class="grid-content bg-purple StudentMsg">
          <StudentMsg :studentDate="studentDate" />
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <!-- ToDO 待办事项 -->
      <el-col :span="12">
        <div class="grid-content bg-purple ToDO">
          <ToDO :todoDate="todoDate" />
        </div>
      </el-col>
      <!-- ClassMsg 课程信息 -->
      <el-col :span="12">
        <div class="grid-content bg-purple ClassMsg">
          <ClassMsg :classData="classData" />
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <!-- StarTeacher 明星教师 -->
      <el-col :span="10">
        <div class="grid-content bg-purple StarTeacher">
          <StarTeacher :teacherData="teacherData" />
        </div>
      </el-col>
      <!-- EduNews 教育头条  -->
      <el-col :span="14">
        <div class="grid-content bg-purple EduNews">
          <EduNews :eduNewsData="eduNewsData" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>



<script>
// 引入组件
import Summary from "./components/Summary.vue";
import FinancialData from "./components/FinancialData.vue";
import StudentMsg from "./components/StudentMsg.vue";
import ToDO from "./components/ToDO.vue";
import ClassMsg from "./components/ClassMsg.vue";
import StarTeacher from "./components/StarTeacher.vue";
import EduNews from "./components/EduNews.vue";

//
import {
  getStudentData,
  getClassData,
  getTeacherData,
  getEduNewsData,
  getSummaryData,
  getTodoDate,
} from "../../api/homeApi";
// import axios from "axios";
export default {
  components: {
    Summary,
    FinancialData,
    StudentMsg,
    ToDO,
    ClassMsg,
    StarTeacher,
    EduNews,
  },
  data() {
    return {
      studentDate: [],
      classData: [],
      teacherData: [],
      eduNewsData: [],
      summaryDate: [],
      todoDate: [],
      // 定时器名称
      timer: null,
    };
  },
  mounted() {
    // 挂载后即发送请求，获得首屏数据
    this.initFun();
    // 定时发送请求，更新summary数据
    this.timer = setInterval(() => {
      setTimeout(this.getRealtimeInfo, 0);
    }, 1000 * 5);
  },
  methods: {
    initFun() {
      this.getRealtimeInfo();
      getStudentData().then((res) => {
        this.studentDate = res.data;
      });
      getClassData().then((res) => {
        this.classData = res.data;
        // console.log(res);
      });
      getTeacherData().then((res) => {
        this.teacherData = res.data;
        // console.log(res);
      });
      getEduNewsData().then((res) => {
        this.eduNewsData = res.data;
        // console.log(res);
      });
      // getTodoDate().then((res) => {
      //   this.todoDate = res.data;
      // });
    },
    getRealtimeInfo() {
      getSummaryData().then((res) => {
        this.summaryDate = res.data;
        // console.log(this.summaryDate[0].number);
      });
      getTodoDate().then((res) => {
        this.todoDate = res.data;
      });
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },
};
</script>

<style lang="less" scoped>
#HomeView {
  // background: #d3e1f6;
}

// 页面大小布局
.Summary {
  height: 150px;
}

.FinancialData,
.StudentMsg {
  height: 400px;
}

.ToDO,
.ClassMsg {
  height: 250px;
}

.StarTeacher,
.EduNews {
  height: 500px;
}

// 样式
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}

.bg-purple {
  background: #fff;
}

.grid-content {
  min-height: 36px;
  background-color: transparent;
}
</style>